import { createStore } from "redux";
import { composeWithDevTools } from "@redux-devtools/extension";

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1,
      };

    case "decrement":
      return {
        count: state.count - 1,
      };

    default:
      return state;
  }
}

const store = createStore(reducer, composeWithDevTools());

/**
 * 中间件的原理
 *    对 dispatch 做了一个封装
 *    演示一个 logger 的中间件
 */

// // 1. 将 store.dispatch 先给存起来
// const next = store.dispatch;
// // 2. 再对 store.dispatch 做修改
// store.dispatch = (action) => {
//   // 输出日志
//   console.log("begin", store.getState());
//   // 触发真实的 dispatch
//   next(action);
//   // 输出日志
//   console.log("end", store.getState());
// };

// thunk 的大致伪代码
const next = store.dispatch;
store.dispatch = (action) => {
  // 对 action 做一个判断
  if (typeof action === "function") {
    // 主动调用这个函数，并传递需要的一些参数进去
    action(next, store.getState);
  } else {
    next(action);
  }
};

export default store;
